<template>
<view>
	<view class="header">盈亏报表</view>
	<view class="header1">
		<picker mode="date" :value="sdate" @change="bindDate" data-key="sdate" @cancel="cancel">
			<view class="uni-input weui-input">{{sdate ? sdate : '请选择开始日期'}}</view>
		</picker>
		<picker mode="date" :value="edate" @change="bindDate" data-key="edate" @cancel="cancel">
			<view class="uni-input weui-input">{{edate ? edate : '请选择结束日期'}}</view>
		</picker>
		<view class="header_bottom" @click="search">搜索</view>
	</view>
	<view class="table">
		<view class="text">利润:{{enter.recharge_pay + enter.card_pay + enter.goods_pay - loss - goods.pay_money}}</view>
		<table border="0" width="95%" cellspacing="0" cellpadding="0">
			<tr>
				<td>营收合计:</td>
				<td colspan="2">{{enter.recharge_pay + enter.card_pay + enter.goods_pay}}</td>
			</tr>
			<tr>
				<td>营收项目</td>
				<td>应收金额</td>
				<td>实收金额</td>
			</tr>
			<tr>
				<td>充值合计</td>
				<td>{{enter.recharge}}</td>
				<td>{{enter.recharge_pay}}</td>
			</tr>
			<tr>
				<td>开卡合计</td>
				<td>{{enter.card}}</td>
				<td>{{enter.card_pay}}</td>
			</tr>
			<tr>
				<td>物品售卖</td>
				<td>{{enter.goods}}</td>
				<td>{{enter.goods_pay}}</td>
			</tr>
		</table>
		<table border="0" width="95%" cellspacing="0" cellpadding="0">
			<tr>
				<td>支出合计:</td>
				<td colspan="2">{{loss + goods.pay_money}}</td>
			</tr>
			<tr>
				<td>支出项目</td>
				<td>应支金额</td>
				<td>实际支出</td>
			</tr>
			<tr>
				<td>物品入库</td>
				<td>{{goods.money}}</td>
				<td>{{goods.pay_money}}</td>
			</tr>
			<tr v-for="(item,index) in lossList" :key="index">
				<td>{{item.title}}</td>
				<td>{{item.price}}</td>
				<td>{{item.price}}</td>
			</tr>
		</table>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			//oaRole 1:店长2:员工3:商户
			oaRole:0,
			enter:{},
			loss:{},
			date:'',
			lossList:[],
			type:1,
			sdate:'',
			edate:'',
			goods:{}
		}
	},
	onLoad:function(){
		this.oaRole = uni.getStorageSync('oaRole'),
		uni.showLoading({
			title:'加载中'
		})
		this.getEnter()
	},
	methods: {
		getEnter:function(){
			var that = this;
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				sdate:this.sdate,
				edate:this.edate
			}
			request({
				url: 'manage/center/count',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					that.enter = res.data.data.enter
					that.loss = res.data.data.loss.count
					that.lossList = res.data.data.loss.list
					that.goods = res.data.data.goods
				}
			})
		},
		bindDate:function(e){
			console.log(e)
			var value = e.detail.value
			var name = e.currentTarget.dataset.key
			this[name] = value
		},
		cancel:function(){
			uni.showLoading({
				title:'加载中'
			})
			this.sdate = ''
			this.edate = ''
			this.getEnter()
		},
		search:function(){
			if(!this.sdate || !this.edate){
				uni.showToast({
					title: '请选择开始日期和结束日期!!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			uni.showLoading({
				title:'加载中'
			})
			this.getEnter()
		}
	},
}
</script>
<style>
.header{
    width:100%;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    background:#00b300;
    color:#fff;
}
.table{
	width:100%;
	padding:10rpx 20rpx 120rpx 20rpx;
}
.text{
	width:95%;
	border:1rpx solid #C8C7CC;
	height:70rpx;
	line-height:70rpx;
	text-align: center;
}
table{
	margin-top:30rpx;
}
td{
	border:1rpx solid #C8C7CC;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
.header1{
	width:100%;
	height:80rpx;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.header1 picker{
	width:40%;
	text-align: center;
	border:1px dashed #E5E5E5;
}
.header_bottom{
	width:18%;
	height:70rpx;
	line-height: 70rpx;
	background: #009900;
	text-align: center;
	color:#FFFFFF;
}
.borderBottom{
	border-bottom: 5rpx solid #B30000;
}
</style>